import React, { createContext, useContext } from "react"

export default function ContextDemo2() {

  function ComponentC() {
    const user = useContext(UserContext)
    return (
      <div>
        <OtherContext.Consumer>
          {
            (other) => (
              <UserContext.Consumer>
                {
                  (name) => {
                    return <span>hello, { name }, { other }</span>
                  }
                }
              </UserContext.Consumer>
            )
          }
        </OtherContext.Consumer>
        <div>useContext(UserContext)的值：{user}</div>
      </div>
    )
  }

  function ComponentB() {
    return (
      <div>
        <ComponentC />
      </div>
    )
  }

  function ComponentA() {
    return (
      <div>
        <ComponentB />
      </div>
    )
  }

  const UserContext = createContext('')
  const OtherContext = createContext('')

  return (
    <div>
      <UserContext.Provider value={'YRQ'}>
        <OtherContext.Provider value={'OOOOther'}>
          <ComponentA />
        </OtherContext.Provider>
      </UserContext.Provider>
    </div>
  )
}